<template>
  <div class="selector-container">
    <el-form>
      <el-descriptions class="mb-16" :column="1" :border="true">
        <el-descriptions-item
          :label="'项目自主等级'"
          label-class-name="desc-label"
          :class-name="'desc-content-1'"
        >
          <!-- 项目自主等级 -->
          <el-form-item>
            <el-tag v-if="projectLevel" :type="getProjectLevelTagType(projectLevel)">
              {{ projectLevel }}
            </el-tag>
            <span v-else class="text-gray-400">
              尚未选择符合规则的标签组合
              <el-tooltip placement="top" max-width="400px">
                <template #content>
                  <div style="text-align: left;" v-html="autonomousRuleMessage"></div>
                </template>
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </span>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          :label="'项目自主类型'"
          label-class-name="desc-label"
          :class-name="'desc-content-1'"
        >
          <!-- 一级分类标签显示 -->
          <el-form-item>
            <template v-if="readOnly">
              <el-tag
                v-for="item in form.level1Tags"
                :key="item"
                class="mx-1"
              >{{ item }}</el-tag>
            </template>
            <template v-else>
              <el-tag
                v-for="item in form.level1Tags"
                :key="item"
                class="mx-1"
              >{{ item }}</el-tag>
            </template>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
            :label="'自主能力分类'"
            label-class-name="desc-label"
            :class-name="'desc-content-1'"
          >
          <!-- 二级分类标签显示 -->
          <el-form-item>
            <template v-if="readOnly">
              <el-tag
                v-for="item in form.level2Tags"
                :key="item"
                class="mx-1"
              >{{ item }}</el-tag>
            </template>
            <template v-else>
              <el-tag
                v-for="item in form.level2Tags"
                :key="item"
                class="mx-1"
              >{{ item }}</el-tag>
            </template>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
            :label="'自主能力名称'"
            label-class-name="desc-label"
            :class-name="'desc-content-1'"
          >
          <!-- 三级分类标签显示 -->
          <el-form-item>
            <template v-if="readOnly">
              <el-tag
                v-for="item in form.level3Tags"
                :key="item"
                class="mx-1"
              >{{ item }}</el-tag>
            </template>
            <template v-else>
              <el-tag
                v-for="item in form.level3Tags"
                :key="item"
                class="mx-1"
              >{{ item }}</el-tag>
            </template>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          v-if="!readOnly"
          :label="'项目自主能力'"
          label-class-name="desc-label"
          :class-name="'desc-content-1'"
          >
          <!-- 级联选择器（仅在非只读模式下显示） -->
          <el-form-item>
            <el-cascader
              v-model="selectedOptions"
              :options="cascaderOptions"
              :props="cascaderProps"
              @change="handleChange"
              clearable
              collapse-tags
              collapse-tags-tooltip
              placeholder="请在此选择项目自主能力信息"
              style="width: 100%;"
            />
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch, defineProps, defineEmits, defineExpose } from 'vue'
import { ElMessage } from 'element-plus'
import { autonomousData } from '@/views/project/projectDetails/mixins/autonomousDataMixin'
import {staticData} from '@/views/project/mixins/staticDataMixin'
import { QuestionFilled } from '@element-plus/icons-vue'

// 定义组件接收的属性
const props = defineProps({
  descriptions: {
    type: Object,
    default: () => ({
      autonomous_type: '',
      autonomous_type_level: '',
      autonomous_group: '',
      autonomous_name: ''
    })
  },
  readOnly: {
    type: Boolean,
    default: false
  }
})

// 定义组件向外发射的事件
const emit = defineEmits(['update:descriptions', 'submit'])

const autonomousRuleMessage = `
      <strong>选择自主能力标签需满足以下规则之一：</strong><br/>
      <br/>
      <strong>L0：</strong><br/>
      - 必须且只能包含 "基础管理"<br/>
      - 不能与其他任何枚举值共存（互斥）<br/>
      <br/>
      <strong>L1：</strong><br/>
      - 必须且只能包含 "自主集成"<br/>
      - 不可与其他类型组合<br/>
      <br/>
      <strong>L2：</strong><br/>
      - 必须包含 "自主集成"<br/>
      - 至少选择 "自主交付" 或 "自主运维" 中的一个（可单选或同时选两者）<br/>
      - 不能包含 "自主研发"<br/>
      <br/>
      <strong>L3：</strong><br/>
      - 必须同时包含 "自主集成" 和 "研发"<br/>
      - 至少选择 "自主交付" 或 "自主运维" 中的一个（可单选或同时选两者）
      `;

const { autonomousTypeMap } = staticData()
// 表单数据
const form = reactive({
  level1Tags: [],
  level2Tags: [],
  level3Tags: []
})

// 项目自主等级
const projectLevel = ref('')

// 选中的级联选项
const selectedOptions = ref([])

// 将数据字典转换为级联选择器所需的格式
const cascaderOptions = computed(() => {
  const options = []
  
  Object.keys(autonomousData).forEach(level1 => {
    const level1Option = {
      value: level1,
      label: level1,
      children: []
    }
    
    // 处理没有子选项的特殊情况（如"基础管理"）
    if (Object.keys(autonomousData[level1]).length === 0) {
      level1Option.leaf = true
    } else {
      Object.keys(autonomousData[level1]).forEach(level2 => {
        const level2Option = {
          value: level2,
          label: level2,
          children: []
        }
        
        autonomousData[level1][level2].forEach(level3 => {
          level2Option.children.push({
            value: level3,
            label: level3
          })
        })
        
        level1Option.children.push(level2Option)
      })
    }
    
    options.push(level1Option)
  })
  
  return options
})

// 级联选择器的配置
const cascaderProps = {
  multiple: true,
  checkStrictly: false,
  emitPath: true,
}

// 处理级联选择器的变化
const handleChange = (value) => {
  // 清空之前的选择
  form.level1Tags = []
  form.level2Tags = []
  form.level3Tags = []
  
  // 处理新的选择
  value.forEach(path => {
    // 根据路径长度判断选择的层级
    if (path.length === 1) {
      // 仅选择了一级，如"基础管理"
      if (!form.level1Tags.includes(path[0])) {
        form.level1Tags.push(path[0])
      }
    } else if (path.length === 2) {
      // 选择了二级
      if (!form.level1Tags.includes(path[0])) {
        form.level1Tags.push(path[0])
      }
      if (!form.level2Tags.includes(path[1])) {
        form.level2Tags.push(path[1])
      }
    } else if (path.length === 3) {
      // 选择了三级
      if (!form.level1Tags.includes(path[0])) {
        form.level1Tags.push(path[0])
      }
      if (!form.level2Tags.includes(path[1])) {
        form.level2Tags.push(path[1])
      }
      if (!form.level3Tags.includes(path[2])) {
        form.level3Tags.push(path[2])
      }
    }
  })
  
  // 计算项目自主等级
  calculateProjectLevel()
}

// 计算项目自主等级
const calculateProjectLevel = () => {
  const selectedLabels = form.level1Tags
  
  // 规则匹配
  if (selectedLabels.length !== 1 && selectedLabels.includes('基础管理')) {
    projectLevel.value = '' // L0 互斥，直接返回
    return
  }

  if (selectedLabels.length === 1 && selectedLabels.includes('基础管理')) {
    projectLevel.value = 'L0' // L0 互斥，直接返回
    return
  }
  
  if (selectedLabels.length === 1 && selectedLabels.includes('自主集成')) {
    projectLevel.value = 'L1'
    return
  }
  
  if (selectedLabels.includes('自主集成') && !selectedLabels.includes('自主研发')) {
    if (selectedLabels.includes('自主交付') || selectedLabels.includes('自主运维')) {
      projectLevel.value = 'L2'
      return
    }
  }
  
  if (selectedLabels.includes('自主集成') && selectedLabels.includes('自主研发')) {
    if (selectedLabels.includes('自主交付') || selectedLabels.includes('自主运维')) {
      projectLevel.value = 'L3'
      return
    }
  }
  
  projectLevel.value = '' // 不符合规则时，返回空
}

// 获取项目等级标签类型
const getProjectLevelTagType = (level) => {
  const types = {
    'L0': 'info',
    'L1': 'success',
    'L2': 'warning',
    'L3': 'danger'
  }
  return types[level] || 'info'
}

// 验证项目自主等级是否符合规则
const validateProjectLevel = () => {
  if (!projectLevel.value) {

    ElMessage({
      message: autonomousRuleMessage,
      type: 'error',
      dangerouslyUseHTMLString: true, // 关键配置
      duration: 100000, // 延长显示时间到10秒以便用户阅读
      showClose: true
    })
    return false
  }
  return true
}

// 校验表单
const validateForm = () => {
  return new Promise((resolve, reject) => {
    // 检查是否至少选择了一个一级分类
    if (form.level1Tags.length === 0) {
      ElMessage.error('自主能力相关字段为必填字段！');
      reject(new Error('自主能力相关字段为必填字段！')); // 返回错误
      return;
    }

    // 验证项目自主等级
    if (!validateProjectLevel()) {
      reject(new Error('项目自主等级验证失败！')); // 返回错误
      return;
    }

    // 所有验证通过
    resolve(true); // 返回成功
  });
};

const mapAutonomousType = (level1TagsData) => {
  // 反转映射关系，从值找键
  const reversedMap = {};
  for (const [key, value] of Object.entries(autonomousTypeMap)) {
    reversedMap[value] = key;
  }

  // 映射每个类型到对应的数字
  const mappedNumbers = level1TagsData
    .map(type => reversedMap[type]) // 查找对应的数字键
    .filter(Boolean); // 过滤掉未找到映射的项

  // 用逗号拼接成字符串
  return mappedNumbers;
}

// 获取当前表单数据方法（供父组件调用）
const getFormData = () => {
  return {
    autonomous_type: mapAutonomousType(form.level1Tags).join(','),
    autonomous_type_level: projectLevel.value,
    autonomous_group: form.level2Tags.join(','),
    autonomous_name: form.level3Tags.join(',')
  }
}

// 重置表单数据
const resetForm = () => {
  form.level1Tags = []
  form.level2Tags = []
  form.level3Tags = []
  projectLevel.value = ''
  selectedOptions.value = []
}

// 根据标签重建级联选择器的选中值
const rebuildSelectedOptions = () => {
  const options = []
  
  // 处理特殊情况：基础管理（只有一级）
  if (form.level1Tags.includes('基础管理')) {
    options.push(['基础管理'])
  }
  
  // 为每个三级标签构建完整路径
  for (const level1 in autonomousData) {
    // 跳过基础管理，已单独处理
    if (level1 === '基础管理') continue;
    
    // 只处理已选中的一级标签
    if (!form.level1Tags.includes(level1)) continue;
    
    for (const level2 in autonomousData[level1]) {
      // 只处理已选中的二级标签
      if (!form.level2Tags.includes(level2)) continue;
      
      // 遍历该二级标签下的所有三级标签
      autonomousData[level1][level2].forEach(level3 => {
        // 如果三级标签在选中列表中，添加完整路径
        if (form.level3Tags.includes(level3)) {
          options.push([level1, level2, level3])
        }
      })
      
      // 如果该二级下没有选中的三级标签，但二级标签已选中，则至少选择一个三级
      const hasSelectedLevel3 = autonomousData[level1][level2].some(l3 => form.level3Tags.includes(l3));
      if (!hasSelectedLevel3 && form.level2Tags.includes(level2)) {
        // 为该二级选择第一个三级，确保路径完整
        if (autonomousData[level1][level2].length > 0) {
          const firstLevel3 = autonomousData[level1][level2][0];
          options.push([level1, level2, firstLevel3]);
          // 同时更新三级标签列表
          if (!form.level3Tags.includes(firstLevel3)) {
            form.level3Tags.push(firstLevel3);
          }
        }
      }
    }
    
    // 检查是否有未匹配到二级标签的一级标签
    const hasMatchedLevel2 = Object.keys(autonomousData[level1]).some(l2 => form.level2Tags.includes(l2));
    if (!hasMatchedLevel2 && level1 !== '基础管理') {
      // 为该一级至少选择一个二级和三级
      const firstLevel2 = Object.keys(autonomousData[level1])[0];
      if (firstLevel2) {
        // 将该二级添加到已选二级列表
        if (!form.level2Tags.includes(firstLevel2)) {
          form.level2Tags.push(firstLevel2);
        }
        
        // 为该二级选择第一个三级
        if (autonomousData[level1][firstLevel2].length > 0) {
          const firstLevel3 = autonomousData[level1][firstLevel2][0];
          options.push([level1, firstLevel2, firstLevel3]);
          // 同时更新三级标签列表
          if (!form.level3Tags.includes(firstLevel3)) {
            form.level3Tags.push(firstLevel3);
          }
        }
      }
    }
  }
  
  // 更新selectedOptions
  selectedOptions.value = options;
}

// 监听level1Tags变化，自动重新计算项目自主等级
watch(() => [...form.level1Tags], () => {
  calculateProjectLevel()
}, { deep: true })

// 监听props.descriptions变化
watch(() => props.descriptions, (newVal) => {
  if (newVal) {
    // 解析传入的数据
    form.level1Tags = newVal.autonomous_type ? newVal.autonomous_type.split(',').filter(Boolean) : []
    form.level2Tags = newVal.autonomous_group ? newVal.autonomous_group.split(',').filter(Boolean) : []
    form.level3Tags = newVal.autonomous_name ? newVal.autonomous_name.split(',').filter(Boolean) : []
    projectLevel.value = newVal.autonomous_type_level || ''
    
    // 无论是否是只读模式，都重建selectedOptions
    // 这样在从只读切换到编辑模式时，级联选择器也会有正确的选中状态
    rebuildSelectedOptions()
  }
}, { immediate: true, deep: true })

// 向父组件暴露方法
defineExpose({
  getFormData,
  resetForm,
  validateForm
})

// 生命周期钩子
onMounted(() => {
  // 初始加载时，如果有传入的数据，解析并填充表单
  if (props.descriptions) {
    form.level1Tags = props.descriptions.autonomous_type ? props.descriptions.autonomous_type.split(',') : []
    form.level2Tags = props.descriptions.autonomous_group ? props.descriptions.autonomous_group.split(',') : []
    form.level3Tags = props.descriptions.autonomous_name ? props.descriptions.autonomous_name.split(',') : []
    projectLevel.value = props.descriptions.autonomous_type_level || ''
    
    // 如果不是只读模式，重建selectedOptions
    if (!props.readOnly) {
      rebuildSelectedOptions()
    }
  }
})
</script>

<style lang="scss" scoped>
@import url('@/views/project/projectDetails/styles/transfer.css');
.selector-container {
  // max-width: 800px;
  // margin: 0 auto;
}

::v-deep .desc-label {
  width: 210px;
}
.el-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.text-gray-400 {
  color: red;
  // 斜体
  font-style: italic;
}

// description为1列时content宽度
::v-deep .desc-content-1 {
  width: 900px;
}
</style>